// 基本信息
import { Applet } from "@/api/interface/iot";
import DialogBox from "@/components/DialogBox";
import UploadImg from "@/components/Upload/Img.vue";
import { Dict, DictType, getDictList } from "@/utils/cacheUtil";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
export default defineComponent({
	props: {
		width: String,
		title: String,
		detail: {
			type: Object as PropType<Applet.ResUserApplet>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		const formRule = reactive({
			name: [{ required: true, message: proxy?.$t("applet_dialog.formrule.name"), trigger: "change" }],
			id: [{ required: true, message: proxy?.$t("applet_dialog.formrule.key"), trigger: "change" }],
			type: [{ required: true, message: proxy?.$t("applet_dialog.formrule.app_type"), trigger: "change" }]
		});

		watchEffect(() => {});
		onMounted(() => {});

		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					emit("submit");
				}
			});
		};
		const typeList = ref<Dict[]>([]);
		getDictList(DictType.AppletType).then(list => {
			typeList.value = list;
		});
		return () => {
			return (
				<DialogBox {...attrs} width={props.width} title={props.title} onConfirm={() => validData()}>
					<div class="flex">
						<div class="w-52 pr-4">
							<UploadImg
								v-model:imageUrl={props.detail.logo}
								emptyTips={proxy?.$t("applet_dialog.uploadimg.emptytips")}
								width="100%"
								height="250px"
								autoUpload
							></UploadImg>
						</div>
						<div class="flex-1">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px">
								<el-form-item label={proxy?.$t("applet_dialog.form_label.type")} prop="type">
									<el-radio-group v-model={props.detail.type} disabled={!props.detail.isAdd}>
										{typeList.value.map((dict: Dict) => {
											return <el-radio label={dict.key}>{dict.label}</el-radio>;
										})}
									</el-radio-group>
								</el-form-item>
								<el-form-item label={proxy?.$t("applet_dialog.form_label.name")} prop="name">
									<el-input v-model={props.detail.name} placeholder={proxy?.$t("applet_dialog.placeholder.name")} />
								</el-form-item>
								<el-form-item label={proxy?.$t("applet_dialog.form_label.key")} prop="id">
									<el-input
										v-model={props.detail.id}
										placeholder={proxy?.$t("applet_dialog.placeholder.key")}
										disabled={!props.detail.isAdd}
									/>
								</el-form-item>
								<el-form-item label={proxy?.$t("applet_dialog.form_label.version")} prop="version">
									<el-input v-model={props.detail.version} placeholder={proxy?.$t("applet_dialog.placeholder.version")} />
								</el-form-item>
								<el-form-item label={proxy?.$t("applet_dialog.form_label.home")} prop="home">
									<el-input v-model={props.detail.home} placeholder="http://127.0.0.1:8080/index.html" />
								</el-form-item>
								<el-form-item label={proxy?.$t("applet_dialog.form_label.doc")} prop="doc">
									<el-input v-model={props.detail.doc} placeholder="http://127.0.0.1:8080/applet/public.pdf" />
								</el-form-item>
								<el-form-item label="应用展厅" prop="show">
									<el-switch v-model={props.detail.show} />
								</el-form-item>
								<el-form-item label={proxy?.$t("applet_dialog.form_label.desc")} prop="desc">
									<el-input
										v-model={props.detail.desc}
										placeholder={proxy?.$t("applet_dialog.placeholder.desc")}
										auto-size
										type="textarea"
										rows={8}
									/>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
